<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<div th:replace="fragment/front/meta"></div>
        <title th:utext="${application.siteName + ' - 在线聊天'}"></title>
        <div th:replace="fragment/front/css"></div>
        <link rel="stylesheet" type="text/css" th:href="@{/statics/page/css/front/chat/index.css}" />
	</head>
	<body>
		<div th:replace="fragment/front/nav"></div>
        <div class="site-container">
            <div class="container">
                <div class="row">
                    <div class="col-xs-3 col-sm-3 col-md-2 sidebar">
                        <ul class="nav nav-sidebar chatting-user">
                            <li class="active">
                                <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                                <span>谢帅</span>
                                <i class="fa fa-close fa-lg" aria-hidden="true"></i>
                            </li>
                            <li>
                                <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                                <span>刘煤炭</span>
                                <i class="fa fa-close fa-lg" aria-hidden="true"></i>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-7 sidebar chat-content-wrap">
	                    <div class="row chat-content">
	                        <div class="chat-content-main">
		                        <ul>
								    <li>
								        <div class="chat-user">
								            <img src="//tp1.sinaimg.cn/1571889140/180/40030060651/1">
								            <cite>贤心<i>2018-08-10 16:38:08</i></cite>
										</div>
										<div class="chat-text">嗨，你好！欢迎体验LayIM。演示标记：1533890288853</div>
								    </li>
								</ul>
	                        </div>
	                    </div>
	                    <div class="row chat-footer">
	                        <div class="row chat-tool" style="margin: 0px">
	                            <i class="fa fa-smile-o"></i>
	                        </div>
	                        <div class="row chat-area">
	                            <textarea rows="" cols=""></textarea>
		                    </div>
							<div class="chat-button-wrap">
								<div class="chat-button">
									<div class="btn-group">
										<button type="button" class="btn btn-default">关闭</button>
									</div>
									<div class="btn-group">
										<button type="button" class="btn btn-default">发送</button>
										<button type="button" class="btn btn-default dropdown-toggle"
											data-toggle="dropdown" aria-haspopup="true"
											aria-expanded="false">
											<span class="caret"></span> 
										</button>
										<ul class="dropdown-menu">
											<li><a href="#">按Enter键发送消息</a></li>
											<li><a href="#">按Ctrl+Enter键发送消息</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-3 sidebar">
                        <div class="row site-user" style="margin: 0px">
		                    <div class="row friend-list-wrap" style="margin: 0px">
								<ul class="contact-tab">
									<li class="active" title="联系人"><i class="fa fa-user"></i></li>
									<li title="群组"><i class="fa fa-users"></i></li>
									<li title="历史会话"><i class="fa fa-commenting"></i></li>
								</ul>
								<ul class="friend-list">
									<li>
									    <h5>
											<i class="fa fa-angle-right"></i>
											<span>知名人物</span>
											<em>(<cite> 5</cite>)</em>
										</h5>
										<ul>
											<li class="friend-list-user">
		                                        <img src="//tva4.sinaimg.cn/crop.0.0.640.640.180/4a02849cjw8fc8vn18vktj20hs0hs75v.jpg">
		                                        <span>罗小凤</span>
		                                        <p>在自己实力不济的时候，不要去相信什么媒体和记者。他们不是善良的人，有时候候他们的采访对当事人而言就是陷阱</p>
		                                    </li>
										</ul>
									</li>
	                            </ul>
								<ul class="message-alert-wrap">
									<li title="搜索"><i class="fa fa-search"></i></li>
									<li title="消息盒子">
										<i class="fa fa-bell-o"></i>
									</li>
								</ul>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
				
		<div th:replace="fragment/front/footer"></div>
        <div th:replace="fragment/front/script"></div>
        <script th:src="@{/statics/page/js/front/chat/index.js}"></script>
    </body>
</html>